<template>
  <div class="pt-[var(--el-header-height)] pb-[var(--el-footer-height)]">
    <div class="flex flex-col items-center justify-center">
      <blockquote>演示@vueuse/motion指令动画，可以做复杂的进入效果</blockquote>
      <h1
        v-motion
        :initial="{ opacity: 0, y: -100, scale: 0.8 }"
        :enter="{ opacity: 1, y: 0, scale: 1 }"
        :hovered="{ scale: 1.2 }"
        class=""
      >
        <i class="mdi mdi-information"></i><span>文档页</span>
      </h1>
      <blockquote>tailwind的动画更简单，更适合交互的组件</blockquote>
      <el-button
        type="primary"
        class="mt-2 transition-all hover:scale-125"
        @click="back"
      >
        返回首页
        <el-icon class="el-icon--right"><i-icon-park-solid:home /></el-icon>
      </el-button>
      <div class="w-[30%] mt-2 mx-auto text-center">文档相关内容在此集中</div>
      <div class="doc-sites">
        <div v-for="section in docSites" :key="section.name">
          <div
            class="border-l-4 border-solid border-green-400 bg-neutral-50 mx-4 mt-4 p-2 font-bold text-xl"
          >
            {{ section.name }}
          </div>
          <div class="flex flex-wrap">
            <link-block
              :url="site.url"
              :title="site.title"
              v-for="site in section.sites"
              :key="site.url"
            ></link-block>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
interface SiteEntry {
  url: string;
  title?: string;
}

interface SectionEntry {
  name: string;
  sites: SiteEntry[];
}

const docSites: SectionEntry[] = [
  {
    name: '基础框架',
    sites: [
      { url: 'https://cn.vuejs.org/' },
      { url: 'https://www.tailwindcss.cn' },
      { url: 'https://element-plus.gitee.io/zh-CN/' },
      { url: 'https://pinia.vuejs.org/zh/' },
      { url: 'https://router.vuejs.org/zh/' },
      { url: 'https://www.npmjs.com/package/koa' },
      { url: 'https://www.electronjs.org/zh/docs/latest/' },
    ],
  },
  {
    name: '语言支持',
    sites: [
      { url: 'https://www.tslang.cn/' },
      {
        url: 'https://www.sass.hk/',
        title: 'Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网',
      },
    ],
  },
  {
    name: '图表',
    sites: [
      { url: 'https://echarts.apache.org/zh/', title: 'Apache Echarts' },
      {
        url: 'https://www.npmjs.com/package/vue-echarts',
      },
    ],
  },
  {
    name: '图标',
    sites: [
      { url: 'https://pictogrammers.com/library/mdi/' },
      { url: 'https://icon-sets.iconify.design/' },
      { url: 'https://www.iconfont.cn/' },
      { url: 'https://www.svgrepo.com/'}
    ],
  },
  {
    name: '工具库',
    sites: [
      { url: 'https://www.axios-http.cn/docs/intro' },
      { url: 'https://dayjs.gitee.io/zh-CN/' },
      { url: 'https://vueuse.org/' },
      {
        url: 'https://vueuse.org/electron/README.html',
        title: '@vueuse/electron',
      },
      { url: 'https://motion.vueuse.org/' },
      { url: 'https://sound.vueuse.org/' },
    ],
  },
  {
    name: '开发工具',
    sites: [
      { url: 'https://cn.vitejs.dev/' },
      { url: 'https://www.postcss.com.cn/' },
      { url: 'https://eslint.bootcss.com/' },
      { url: 'https://www.prettier.cn/' },
      { url: 'https://www.npmjs.com/package/unplugin-vue-components' },
      { url: 'https://www.npmjs.com/package/unplugin-auto-import' },
      { url: 'https://www.npmjs.com/package/unplugin-icons' },
      { url: 'https://www.npmjs.com/package/vite-plugin-inspect' },
      { url: 'https://www.npmjs.com/package/vite-plugin-imp' },
    ],
  },
  {
    name: 'VSCode插件',
    sites: [
      { url: 'https://marketplace.visualstudio.com/items?itemName=vue.volar' },
      {
        url: 'https://marketplace.visualstudio.com/items?itemName=vue.vscode-typescript-vue-plugin',
      },
      {
        url: 'https://marketplace.visualstudio.com/items?itemName=steoates.autoimport',
      },
      {
        url: 'https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag',
      },
      {
        url: 'https://marketplace.visualstudio.com/items?itemName=anseki.vscode-color',
      },
      {
        url: 'https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek',
      },
      {
        url: 'https://marketplace.visualstudio.com/items?itemName=ren-wei.echarts-enhanced-completion',
      },
      {
        url: 'https://marketplace.visualstudio.com/items?itemName=editorconfig.editorconfig',
      },
      {
        url: 'https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint',
      },
      {
        url: 'https://marketplace.visualstudio.com/items?itemName=michelemelluso.gitignore',
      },
      {
        url: 'https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag',
      },
      {
        url: 'https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css',
      },
      {
        url: 'https://marketplace.visualstudio.com/items?itemName=hwencc.html-tag-wrapper',
      },
      {
        url: 'https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense',
      },
      {
        url: 'https://marketplace.visualstudio.com/items?itemName=csstools.postcss',
      },
      {
        url: 'https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode',
      },
      {
        url: 'https://marketplace.visualstudio.com/items?itemName=yatki.vscode-surround',
      },
      {
        url: 'https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss',
      },
      {
        url: 'https://marketplace.visualstudio.com/items?itemName=austenc.tailwind-docs',
      },
      { url: 'https://marketplace.visualstudio.com/items?itemName=antfu.vite' },
      {
        url: 'https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets',
      },
      {
        url: 'https://marketplace.visualstudio.com/items?itemName=dariofuzinato.vue-peek',
      },
      {
        url: 'https://marketplace.visualstudio.com/items?itemName=lukas-tr.materialdesignicons-intellisense',
      },
      {
        url: 'https://marketplace.visualstudio.com/items?itemName=medo64.render-crlf',
      },
      {
        url: 'https://marketplace.visualstudio.com/items?itemName=jzmstrjp.color-the-tag-name'
      }
    ],
  },
  {
    name: '额外教程',
    sites: [
      {
        url: 'https://ts.xcatliu.com/index.html',
      },
    ],
  },
];
const router = useRouter();
const back = () => {
  router.push('/');
};
</script>

<style lang="scss" scoped></style>
